<template>
<div>
  <el-card class="box-card">
    <div  class="text item">
    <br>
      维数金融将根据您填写的信息进行初步审核，您填写的信息资料越真实详尽，您申请融资的审批通过率越高。同时，我们有严格的用户信息操作规范.

      确保您的隐私不被泄露，请勿填写虚假信息。

    </div>
  </el-card>

<br>

  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="金融产品选择" prop="productId">
      <el-select v-model="ruleForm.productId" placeholder="请选择">
        <el-option label="应收租约保理B套餐" value="8"></el-option>
        <el-option label="金融" value="32"></el-option>
        <el-option label="管理" value="51"></el-option>
        <el-option label="T1" value="53"></el-option>
        <el-option label="对私" value="73"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="授信额度">
      <el-input v-model="ruleForm.productId" disabled="disabled"></el-input>%
    </el-form-item>


    <el-form-item label="年一次服务率" prop="serviceFee">
      <el-input v-model="ruleForm.serviceFee"></el-input>%
    </el-form-item>


    <el-form-item label="年利率" prop="interestRate">
      <el-input v-model="ruleForm.interestRate"></el-input>%
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">添加租房合同</el-button>
    </el-form-item>
  </el-form>


  <el-dialog title="租房合同查询" :visible.sync="dialogTableVisible">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="小区名称">
        <el-input v-model="formInline.premiseName" placeholder="小区名称"></el-input>
      </el-form-item>
      <el-form-item label="租客姓名">
        <el-input v-model="formInline.TenantName" placeholder="租客姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="gridData">
      <el-table-column property="tenantName" label="租客姓名" width="150"></el-table-column>
      <el-table-column property="roomName" label="房源信息" width="200"></el-table-column>
      <el-table-column property="signingDate" label="签约日期"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
      @current-change="gopage"
      :page-size="formInline.size"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </el-dialog>



  <el-table
    :data="tableData"
    border
    style="width: 90%">
    <el-table-column
      fixed
      prop="advanceDays"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      fixed
      prop="roomName"
      label="房产信息"
      width="120">
    </el-table-column>
    <el-table-column
      prop="roomCode"
      label="房源编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tenantName"
      label="租客姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="tenantEmergencyPhone"
      label="租客手机号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="shouldMonthRent"
      label="应收租约金额"
      width="120">
      <template slot-scope="scope">
        {{scope.row.shouldMonthRent}}元
      </template>
    </el-table-column>
    <el-table-column
      prop="factoringCreditMoney"
      label="保理授信额度"
      width="120">
      <template slot-scope="scope">
        {{scope.row.shouldMonthRent * scope.row.factoringCreditMoney}}元
      </template>
    </el-table-column>
    <el-table-column
      prop="FactoringInterest"
      label="保理利息"
      width="120">
      <template slot-scope="scope">
        {{scope.row.FactoringInterest}}元
      </template>
    </el-table-column>
    <el-table-column
      prop="FactoringPeriod"
      label="借款期限"
      width="120">
      <template slot-scope="scope">
        {{scope.row.FactoringPeriod}}个月
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="deletebyId(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
 <br>
  <br>
  <el-button @click="saveFactoringApply()" type="primary" size="small">提交申请</el-button>

</div>
</template>

<script>
import * as jinrongListApi from "@/api/wishu-financial/jinrong/index";
export default {
  name: "index",
  data(){
    return{
      tableData:[],
      dialogTableVisible:false,
      gridData:[],
      formInline:{
        size:10,
        current:1,
      },
      total:1,
      rules:{
       productId: [
          { required: true, message: '请输入授信额度', trigger: 'blur' },
        ],serviceFee: [
          { required: true, message: '请输入年一次服务率', trigger: 'blur' },
        ],interestRate: [
          { required: true, message: '请输入年利率', trigger: 'blur' },
        ],
      },
      ruleForm:{},
      rowNo:1,
      form:{},
      Factoring:{},
    }
  },
  methods:{
    saveFactoringApply(){
      console.log(this.Factoring)
    if (this.Factoring ==null){
      this.$message.error("请选择租房合同")
    }else {
      jinrongListApi.saveFactoringApply(this.Factoring).then(res=>{
        if (res.code==200){
          this.$message.success(res.msg)
        }else {
          this.$message.error(res.msg)
        }
      })
    }
    },
    onSubmit(){},
    deletebyId(){
      this.tableData = null
    },
    gopage(data){
      this.formInline.current = data;
      this.getList()
    },
    handleClick(data){
      jinrongListApi.catulateFactorInfo(
        data.id
        ,this.ruleForm.productId
        ,this.ruleForm.interestRate
        ,this.ruleForm.serviceFee
        ,this.rowNo).then(res=>{
        this.tableData = res.data
        this.Factoring = this.tableData[0]
        console.log(this.tableData[0])

        this.dialogTableVisible=false;
      })
    },
    getList(){
      console.log(this.ruleForm)
      jinrongListApi.getList(
        this.formInline
      ).then(res=>{
        this.gridData = res.data.records,
          this.total = res.data.total
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        this.dialogTableVisible = true;
        this.getList()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  created() {
  }
}
</script>

<style scoped>

</style>
